<template>
	<view class="box">
		<uni-nav-bar background-color="#27a647" 
		left-icon="left" color="white" 
		:title="movie.name" @clickLeft="comeback"></uni-nav-bar>
		<view class="movieHead" :style="{'backgroundImage':'url(http://172.21.63.114:10001'+movie.cover+')'}">
		</view>
		<view class="moviecontent">
			<div><img :src="'http://172.21.63.114:10001'+movie.cover" alt="" width="110rpx" height="150rpx"></div>
			<div class="jianjie">
				<p class="title">{{movie.name}}</p>
				<p>喜淘评分：<span style="color: gold;font-size: 30rpx;">{{movie.score}}</span></p>
				<p>语言：{{movie.language}}</p>
				<p>上映年份：{{year}}</p>
			</div>
		</view>
		<view class="wantSee">
			<div>
				<p>想看人数</p>
				<p>{{movie.likeNum}}</p>
			</div>
			<div>
				
			</div>
			<div>
				<p>看过人数</p>
				<p>{{movie.favoriteNum}}</p>
			</div>
		</view>
		<view style="padding: 10rpx 10rpx;" >
			<u--text text="附近影院"></u--text>
		</view>
		<view class="movieTime" v-for="(item,index) in time" v-if="time.length" @click="handleOpen(item)">
			<div>
				<h4>{{item.theatreName}}</h4>
				<p>场次：{{item.startTime}}--{{item.endTime}}</p>
				<p>已售：{{item.saleNum}}</p>
			</div>
			<div>
				<p><span style="color: red;font-size: 30rpx;">￥{{item.price}}</span></p>
			</div>
		</view>
		<view v-else>
			<u-empty
			        mode="history"
			        icon="http://cdn.uviewui.com/uview/empty/history.png"
			>
			</u-empty>
		</view>
		<view class="MovieBottom">
			<div>联系客服</div>
			<div style="border-right: 2rpx solid #adadad;width: 2px;height: 100%;" ></div>
			<div @click="getMyOrder">我的订单</div>
		</view>
		<u-popup :show="show" @close="close">
            <view class="uPopup"> 
				<div>
					<p style="padding: 20rpx 0 15rpx 15rpx;">座位</p>
					<view class="list4times" >
						<div class="zuoweiNum" >
							<checkbox-group @change="checkT">
								<p>第1排</p>
							<label v-for="(item,index) in cols" :key='index'>
								<span v-if="(index+1)%16==0">
									<checkbox  :value="item.row+item.col" /></br>
									<p v-if="(index+1)/16<5">第{{(index+1)/16+1}}排</p>
								</span>
								<span v-else>
									<checkbox  :value="item.row+item.col" />
								</span>
							</label>
							</checkbox-group>
						</div>
						
					</view>
				</div>
				<div class="tags">
					<u-tag :text="item" size="size" plain v-for="(item,index) in checkboxs"></u-tag>
				</div>
				<div class="list4timesBtn">
					<u-button text="确定" @click="handleSubmit"></u-button>
					<u-button text="取消" @click="close"></u-button>
				</div>
            </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				movie:{
					playDate:''
				},
				time:[],
				show:false,
				cols:[],
				checkboxs:[],
				cinema:[],
				rowCol:[],
				seatId:[]
			};
		},
		onLoad(opt) {
			this.id=opt.movieId
			this.getMovieTimes()
			this.getMovieXq()
		},
		methods:{
			comeback(){
				uni.navigateBack({
					delta: 1
				});
			},
			getMovieXq(){//获取影片详情
				this.$request({
					url:'/prod-api/api/movie/film/detail/'+this.id,
					method:'GET',
				}).then(res=>{
					// console.log(res);
					this.movie=res.data.data
				}).catch(err=>{
					console.log(err);
				})
			},
			getMovieTimes(){
				this.$request({
					url:'/prod-api/api/movie/theatre/times/list',
					method:'GET',
					data:{movieId:this.id}
				}).then(res=>{
					this.time=res.data.rows
					// console.log(this.time);
				}).catch(err=>{
					console.log(err);
				})
			},
			handleOpen(item){
				this.cinema=item
				this.checkboxs=[]
				this.$request({
					url:'/prod-api/api/movie/theatre/list4times',
					method:'GET',
					data:{
						roomId:item.roomId,
						id:item.id
					}
				}).then(res=>{
					this.cols=res.data.data
					// console.log(res);
				}).catch(err=>{
					console.log(err);
				})
				this.show=true
			},
			close(){
				this.show=false
			},
			checkT(e){ //选座
				this.checkboxs=e.detail.value.map(o=>o.slice(0,1)+'排'+o.slice(1)+'座')
				this.rowCol=e.detail.value
			},
			handleSubmit(){
				// console.log(this.cinema,this.checkboxs);
				this.rowCol.forEach(item=>{//发送请求获取座位id
					this.$request({
						url: '/prod-api/api/movie/theatre/seat/list',
						method: 'GET',
						data:{
							col:item.slice(1),
							row:item.slice(0,1),
							roomId:this.cinema.roomId
						}
						
					}).then(res => {
						// console.log(res);
						this.seatId.push(res.data.rows[0].id)
						// console.log("res",this.seatId);
					}).catch(err => {
						console.log(err);
					})
				})
				setTimeout(()=>{
					uni.navigateTo({
							url:'/pages/payMoney/payMoney?seat='+JSON.stringify(this.checkboxs)+'&seatId='+JSON.stringify(this.seatId)+'&movie='+JSON.stringify(this.cinema)
					})
				},300)
				this.seatId=[]
				
				
			},
			getMyOrder(){
				uni.navigateTo({
					url:'/pages/myOrders/myOrders'
				})
			}
		},
		computed:{
			year(){
				return this.movie.playDate.slice(0,4)
			},
		}
	}
</script>

<style lang="scss">
.box{
	position: relative;
	padding-bottom: 88rpx;
	.movieHead{
		padding-top: 88rpx;
		// background-color: rgba(0, 0, 0, 0.6);
		background-size: 100% 100%;
		filter:blur(4px)brightness(50%);
		height: 320rpx;
	}
	.moviecontent{
		// background-color: rgba(0, 0, 0, 0.8);
		position: absolute;
		top: 128rpx;
		left: 44rpx;
		height: 320rpx;
		display: flex;
		.jianjie{
			margin-left: 60rpx;
			color: white;
			font-size: 25rpx;
			.title{
				font-size: 70rpx;
				font-weight: 550;
				margin-bottom: 20rpx;
			}
		}
	}
	.wantSee{
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		color: #adadad;
		border-bottom: 1px solid #dadada;
		text-align: center;
		div:nth-child(2){
			border-right: 1px solid #dadada;
		}
	}
	.movieTime{
		height: 140rpx;
		padding: 30rpx 25rpx 0;
		display: flex;
		border-bottom: 15rpx solid #efefe9;
		div:nth-child(2){
			margin-left: auto;
			 margin-top: 30rpx;
		}
		p{
			font-size: 24rpx;
			margin: 10rpx 0;
		}
	}
	.MovieBottom{
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 80rpx;
		// border-top:1px solid #adadad;
		text-align: center;
		background-color: white;
		div{
			width: 100%;
			height: 100%;
			line-height: 70rpx;
		}
	}
	.uPopup{
		height:875rpx;
		.list4times{
			display: flex;
			height: 605rpx;
			overflow: auto;
			.zuoweiNum{

				padding-left: 20rpx;
				checkbox{
					margin: 5rpx;
				}
			}
		}
		.tags{
			height: 120rpx;
			.u-transition{
				width: 140rpx;
				
				display: inline-block;
				margin: 10rpx 15rpx;
				/deep/.u-tag{
					justify-content: center;
				}
			}
		}
		.list4timesBtn{
			button{
				display: inline-block;
				width: 120rpx;
				line-height: 76rpx;
				margin-right: 20rpx;
				float: right;
			}
		}
	}
}
</style>
